<template>
  <Poptip trigger="hover" :title="userName" width="600" :transfer="true" placement="bottom">
    <a href="javascript:;">{{userName}}</a>
    <div slot="content">
      <Card :bordered='true' class="detail" dis-hover>
        <h5>注册类型</h5>
        <Row>
          <Col span="12">
          <div class="span" style="vertical-align:top;">会员类型：</div>
          <span style="display:inline-block;" v-html="data.personalTypeName||'-'"></span>
          </Col>
          <Col span="12">
          <div class="span" style="vertical-align:top;">职业名称：</div>
          <span style="display:inline-block;" v-html="data.careerName||'-'"></span>
          </Col>
        </Row>
      </Card>
      <Card :bordered='true' class="detail m-t-sm" dis-hover>
        <h5>基础信息</h5>
        <Row>
          <Col span="24">
          <div class="span">照片：</div><img :src="data.photo" />
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <div class="span">姓名：</div>
          <span v-text="data.name||'-'"></span>
          </Col>
          <Col span="12">
          <div class="span">英文名：</div>
          <span v-text="data.englishName||'-'"></span>
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <div class="span">出生日期：</div>
          <span v-text="data.birthday||'-'"></span>
          </Col>
          <Col span="12">
          <div class="span">性别：</div>
          <dict-span code="AH" :value='data.gender'></dict-span>
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <div class="span">证件类型：</div>
          <dict-span code="ZGX_ZJLX" :value='data.cardType'></dict-span>
          </Col>
          <Col span="12">
          <div class="span">证件号码：</div>
          <span v-text="data.cardNo||'-'"></span>
          </Col>
        </Row>
        <Row>
          <Col span="12">
          <div class="span">国籍：</div>
          <dict-span code="AG_OUT" :value='data.country'></dict-span>

          </Col>
          <Col span="12">
          <div class="span">居住地：</div>
          <span v-text="$config.personAddress(data,AGOUTS,AGINS)"></span>
          </Col>
        </Row>
      </Card>
    </div>
  </Poptip>
</template>

<script>
import dictSpan from "_c/dict/dict-span.vue";
import { getPersonal } from "@/api/configure";
// 赛事管理
export default {
  components: {
    dictSpan
  },
  props: {
    AGOUTS: {
      type: Array,
      default: []
    },
    AGINS: {
      type: Array,
      default: []
    },
    personId: {
      type: String,
      default: ""
    },
    userName: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      data: {},
      loading: true
    };
  },
  mounted() {
    this.getPersonal();
  },
  watch: {
    personId: (newVal, oldVal) => {
      this.getPersonal(newVal);
    }
  },
  methods: {
    // 获取数据
    getPersonal() {
      let self = this;
      if (self.personId) {
        self.loading = true;
        getPersonal(self.personId)
          .then(data => {
            if (data && data.memberTypeDtos) {
              let careerName = "";
              let personalTypeName = data.memberTypeDtos.map(x => {
                x.careers.forEach(y => {
                  careerName += y.careerName + "<br />";
                });
                return x.memberTypeName;
              });

              personalTypeName = personalTypeName.join("<br />");
              careerName = self.$config.fTrimEnd(careerName, "<br />");
              data.personalTypeName = personalTypeName;
              data.careerName = careerName;
            }
            self.data = data;
            self.loading = true;
          })
          .catch(error => {
            self.loading = true;
          });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.detail {
  h5 {
    border-left: 5px solid #1890ff;
    padding-left: 5px;
    margin-bottom: 10px;
  }
  img {
    height: 180px;
    display: inline-block;
    vertical-align: middle;
  }
  .span {
    width: 100px;
    display: inline-block;
    vertical-align: middle;
    line-height: 30px;
    font-weight: bolder;
  }
  span {
    white-space: normal;
  }
}
</style>
 